Conflicting Javascript Frameworks
Why Javascript Frameworks are Used
Javascript frameworks provide very convenient, compact methods for developers to manipulate the content and layout of web pages. For example, if I were to create a javascript function to toggle the visibility of all paragraph elements on a page with the class “myclass”:
myclass”>
when a button with the id of “toggle_button” is clicked:
<input type="button" id="toggle_button" /> |
It would require the following javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/<span class=">// <![CDATA[ javascript</span>"> document.getElementById("toggle_button").onclick = function(){ var p = document.getElementsByName("p"); for(n=0; n<p.length; n++){ if(n.ClassName=="myclass"){ if(p[n].style.display=="block"){ p[n].style.display = "none"; } else{ p[n].style.display = "block"; } } } } } // ]]></script> |
Using a javascript framework such a JQuery, it would require only a single line of javascript to accomplish the same task:
1 2 3 |
<script type="text/javascript"> $("#toggle_button").click(function(){ $(".myclass").toggle(); }); </script> |
How Javascript Frameworks are Used
To use a javascript framework, the framework code must be included on your page as any javascript include would be:
<script type="text/javascript"> type="text/javascript" src="jquery.js"></script> |
After loading this framework on the page, an object exists for the framework containing all of the special functions a developer would use to manipulate the page. Sometimes plugins are loaded within the framework object to add functionality to the framework. These plugins could include code to create dynamic dropdown menus, plugins to validate forms, etc.
Why Conflicts Occur
Conflicts may occur if a framework is included a second time on the same page, because it will overwrite any additional code or plugins on your page that was added when the first version of the framework loaded. If a conflict between frameworks occurs, you will likely notice the symptoms–your dropdown menu no longer works or your add to cart form can no longer be submitted. Even if you have a web development tool that displays javascript errors, they may be difficult to diagnose since you will likely see a fairly generic error, such as:
ReferenceError: myfunction is not defined
|
Other conflicts can occur between frameworks if multiple frameworks are loaded on a page since many javascript frameworks use a global alias to contain the object to make it easier to use. For example, the JQuery framework creates a JQuery object on the page, but also creates an alias of the dollar sign, so instead of writing:
<script type="text/javascript">// <![CDATA[ jQuery("#<span class="hiddenSpellError" pre="">mydiv</span>").hide(); // ]]></script> |
you can simply write:
<script type="text/javascript">// <![CDATA[ $("#<span class="hiddenSpellError" pre="">mydiv</span>").hide(); // ]]></script> |
Several other frameworks use the dollar sign as an alias as well (Prototype, Mootools, etc). As a result, loading two frameworks that use the same alias will result in a conflict where the second framework loaded on the page is assigned the alias making any code using the alias for the first framework invalid.
Resolving Conflicts between Javascript Frameworks
There are a couple of methods that can resolve these conflicts.
- If you add code using a particular framework to your page and that framework is already loaded, you can in many cases skip loading the javascript include that loads the framework.
- With some frameworks (such as JQuery) you can move your code for that framework into its own namespace–that is, load the framework as a custom object, with no shared aliases. Although this sounds complicated, with JQuery, it is as simple as calling the following with a variable of your choice after loading the framework:
<script type="text/javascript">// <![CDATA[ var <span class="hiddenSpellError" pre="var ">myobject</span> = jQuery.noConflict(); // ]]></script> |
In all of your code, you will use this variable just as you would have used the dollar sign alias.
<script type="text/javascript">// <![CDATA[ <span class="hiddenSpellError" pre="">myObject</span>("#toggle_button").click(function(){ myObject(".myclass").toggle(); }); // ]]></script> |
If you use ShopSite version 11 SP2 or higher, ShopSite is loading JQuery before the opening tag on every ShopSite-generated page on your site (with the exception of Customer Registration pages). They have de-conflicted JQuery by running it under their own namespace (ss_JQuery) so that it will not interfere with javascript already on your page.
Looking for a web host that understands ecommerce and business hosting?
Check us out today!
